<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>书架</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_hsage5e3gw.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/bookshelf.css">
</head>
<body>
    <header>
        <p class="fcc mt-20">书架</p>
        <div class="head bg-fff mt-20">
            <nav class="flex jc-sa">
                <a onclick="changeNav(1);" class="link active f16 f888 fw-b" href="#">待读</a>
                <a onclick="changeNav(2);" class="link f16 f888 fw-b" href="#">已读</a>
            </nav>
        </div>
    </header>

    <div class="blank"></div>
    <div class="blank"></div>
    <main>
        <!-- 列表 -->
        <ul class="link"  id="shelfListContainer">
            <!-- <li class="item flex aic jc-sa bg-fff">
                <input type="checkbox" name="items">
                <img src="./img/xiyouji.png" alt="">
                <div class="word">
                    <h3>西游记</h3>
                    <p>吴承恩 著</p>
                    <p>
                        <span>4-12岁</span>
                        <span>传统文化</span>
                    </p>
                </div>
                <div class="k" style="width: 50px;"></div>
            </li> -->
        </ul>

    </main>

    <footer>
        <div class="all bg-fff fixed w100p flex aic jc-sa">
            <label><input type="checkbox" id="selectAll" onclick="toggleCheckboxes()"> 全选</label>
            <button class="deleteBook" onclick="bookshelf.deleteSelectedBooks()">删除</button>
            <a href="./member.html">
                <input type="submit" value="提交订单" class="submit">
            </a>
        </div>

        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link active flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>

    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>
    <script>
        //切换导航栏
        function changeNav(index) {
            document.querySelector('nav .active').classList.remove('active');
            document.querySelector(`nav .link:nth-child(${index})`).classList.add('active');
            
            setTimeout(function () {
                //根据index的值去跳转
                if (index === 1) {
                    location.href = 'bookshelf.html';
                } else if (index === 2) {
                    location.href = 'reading.html';
                }
            }, 200);
        }
    
        // 全选
        function toggleCheckboxes() {
            var checkboxes = document.querySelectorAll('input[type="checkbox"][name="items"]');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = document.getElementById('selectAll').checked;
            });
        }
    
        // 定义bookshelf对象
        var bookshelf = {
            getList: function() {
                var url = 'http://localhost:3001/bookshelf';
                axios.get(url).then(function(res) {
                    bookshelf.render(res.data);
                });
            },
            render: function(list) {
                var htmlStr = '';
                list.forEach(function(item) {
                    htmlStr += `
                        <li class="item flex aic bg-fff" data-id="${item.id}">
                            <input type="checkbox" name="items">
                            <img src="${item.imgUrl}" alt="" class="ml-20">
                            <div class="word ml-20">
                                <h3>${item.bookname}</h3>
                                <p>${item.author}</p>
                                <p>
                                    <span>${item.ageRange}</span>
                                    <span>${item.category}</span>
                                </p>
                            </div>
                        </li>
                    `;
                });
                $('#shelfListContainer').html(htmlStr);
            },
            deleteBook: function(id) {
                var url = `http://localhost:3001/bookshelf/${id}`;
                axios.delete(url).then(function(res) {
                    $('#' + id).remove();
                    alert('删除成功');
                }).catch(function(err) {
                    console.error('删除失败', err);
                });
            },
            deleteSelectedBooks: function() {
                var selectedBooks = document.querySelectorAll('input[type="checkbox"][name="items"]:checked');
                selectedBooks.forEach(function(checkbox) {
                    var bookId = checkbox.closest('.item').dataset.id;
                    bookshelf.deleteBook(bookId);
                });
            },
            bindDeleteEvents: function() {
                // 这里不需要单独的删除事件，因为删除通过全选和删除按钮处理
            }
        };

        $(document).ready(function() {
            bookshelf.getList();
        });
    </script>
</body>
</html>